/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {Dimensions, ImageBackground} from 'react-native';
import { Icon, Toast } from 'antd-mobile-rn';

// project
import {Page, Content, Row, Between, Hand, ItemX, ItemY, Text, Image, TouchOpacity} from '../../library';
import HttpTemp from '../../preset/func/http/httptemp';
import {FooterMain} from '../../preset';



/******************************************************************************************
 * Export
 ******************************************************************************************/
export default class Me extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            headImage:'',
            phone:'123456789',
            id:1
        };
    }


    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
        
        HttpTemp.get({
            url:'/page/user/detail.php',
            success:(res)=>{
                this.setState({
                    headImage:res.data.object.set_head,
                    phone:res.data.set_mobile,
                    id:res.data.id
                })
                console.log('res++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++',res)
                console.log('this.state++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++',this.state)
            }
        })
    }



    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        var windowWidth = Dimensions.get('window').width;
        return(
            <Page>
                <Content bg='#efeff4' mb='50'>
                
                    {/* 个人信息 star */}
                    <Row style={{backgroundColor:'#505c5fff'}}>
                        <ImageBackground source={require('../../assets/u1404.png')} style={{width:
                            '100%',height:'100%'}} resizeMode='cover'>
                            {/* 设置按钮 star */}
                            <Row x='right' pa='14 15' pt='20'>
                                <TouchOpacity active={0.6} onPress={(e)=> {
                                    // Toast.info("此功能暂未开启");
                                    this.Nav.navigate('UserSystem');
                                }}>
                                    <Hand w='28' h='28' ra='14' oh >
                                        <Image source={require('../../assets/me_set.png')} w='28' h='28' ra='14'></Image>
                                    </Hand>
                                </TouchOpacity>
                            </Row>
                            {/* 设置按钮 end */}
                            {/* 头像信息 star */}
                            <Row px='15'>
                                <Between>
                                    <ItemX x='left' y='center' f='1'>
                                        <Hand w='58' h='58' ra='29' oh mr='13'>
                                            <Image source={{uri:this.state.headImage+'?l='+Math.random()}} w='58' h='58' ra='29' resizeMode='cover' style={{backgroundColor:'#efeff4'}}></Image>
                                        </Hand>
                                        <Text f='1' color='#fff'>{this.state.phone.substring(0,3)+'****'+this.state.phone.substring(7,11)}</Text>
                                    </ItemX>
                                    <TouchOpacity top="20"  active={0.6} onPress={(e)=> {
                                            this.Nav.navigate('UserSetting');
                                        }}>
                                        <ItemX x='right' f='1'>
                                                <Text color='#fff' size='11'>个人资料</Text>
                                                <Icon type='right' size='xxs' color='#fff'></Icon>
                                        </ItemX>
                                    </TouchOpacity>

                                </Between>
                            </Row>
                            {/* 头像信息 end */}
                            {/* 展示栏 star */}
                            <Row pa='10 15'>
                                <Between pb='2'>
                                    <ItemY x='center' y='center' w='58'>
                                        <Text pt='2' color='#fff' size='18' mb='7'>0.00</Text>
                                        <Text color='#fff' size='12'>金额</Text>
                                    </ItemY>
                                    <ItemY>
                                        <Text h='20' w='1' bg='#fff'></Text>
                                        <Text color='#fff' size='12'> </Text>
                                    </ItemY>
                                    <ItemY x='center' y='center' w='58'>
                                        <Text pt='2' color='#fff' size='18' mb='7'>0</Text>
                                        <Text color='#fff' size='12'>现金红包</Text>
                                    </ItemY>
                                    <ItemY>
                                        <Text h='20' w='1' bg='#fff'></Text>
                                        <Text color='#fff' size='12'> </Text>
                                    </ItemY>
                                    <ItemY x='center' y='center' w='58'>
                                        <Text pt='2' color='#fff' size='18' mb='7'>0</Text>
                                        <Text color='#fff' size='12'>卡卷红包</Text>
                                    </ItemY>
                                </Between>
                            </Row>
                            {/* 展示栏 end */}
                        </ImageBackground>
                    </Row>
                    {/* 个人信息 end */}

                    {/* 菜单条目 star */}
                    <Row my='5'>
                        <ItemY f='1'>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserListMessage');
                            }}>
                                <Row h='65' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='60' oh x='center' y='center'>
                                        <Image w='30' h='30' source={require('../../assets/u1471.jpg')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            我的消息
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserListBill');
                            }}>
                                <Row h='65' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='60' oh x='center' y='center'>
                                        <Image w='30' h='30' source={require('../../assets/u1473.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            我的账单
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                        </ItemY>
                    </Row>
                    <Row my='5'>
                        <ItemY f='1'>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserListOrder');
                            }}>
                                <Row h='65' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='60' oh x='center' y='center'>
                                        <Image w='30' h='30' source={require('../../assets/u1475.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            我的订单
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserListCollect');
                            }}>
                                <Row h='65' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='60' oh x='center' y='center'>
                                        <Image w='30' h='30' source={require('../../assets/u1477.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            我的收藏
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserListActivity');
                            }}>
                                <Row h='65' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='60' oh x='center' y='center'>
                                        <Image w='30' h='30' source={require('../../assets/u1479.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            我的活动
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                        </ItemY>
                    </Row>

                    <Row my='5'>
                        <ItemY f='1'>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                this.Nav.navigate('UserHelp');
                            }}>
                                <Row h='37' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='37' oh x='center' y='center'>
                                        <Image w='22' h='22' source={require('../../assets/u1481.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            帮助反馈
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                            <TouchOpacity active={0.6} w={windowWidth} bb='solid 1 #f0f0f0' onPress={(e)=> {
                                Toast.info('此功能暂未开启')
                            }}>
                                <Row h='37' x='left' y='center' px='15' bg='#fff' f='1'>
                                    <Hand w='40' h='37' oh x='center' y='center'>
                                        <Image w='22' h='22' source={require('../../assets/u1483.png')} ></Image>
                                    </Hand>
                                    <Hand ml='15'>
                                        <Text color='#515151'>
                                            应用分享
                                        </Text> 
                                    </Hand>
                                </Row>
                            </TouchOpacity>
                        </ItemY>
                    </Row>
                    {/* 菜单条目 end */}
                </Content>

                {/* 页脚 */}
                <FooterMain current='User' nav={this.Nav}></FooterMain>
            </Page>
        )
    }
}
